<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Tests for jQuery Create DOM Nodes plugin</title>
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.createdomnodes.js"></script>
        <script type="text/javascript">
var BenchmarkUI = {
    test: false,
    appendWithJquery: function() {
        $("<li/>")
           .attr("contactid","")
           .append(
               $("<span/>")
                    .addClass("baseinfo")
                    .append(
                        $("<span/>")
                            .addClass("fullname")
                            .text("fullname test")
                    )
                    .append("(")
                    .append(
                        $("<a/>")
                            .attr("href", "#")
                            .text("coucou")
                            .click(function(){alert("test");})
                    )
                    .append(")")
                    .append(
                        $("<a/>")
                            .attr("persist", "true")
                            .attr("href", "#")
                            .addClass("develop")
                    )
                    .append(
                        $("<span/>")
                            .addClass("company")
                            .text("company")
                    )   
            )
            .append(
                $("<div/>")
                    .hide()
                    .addClass("moreinfo")
                    .append(
                        $("<div/>")
                            .append(
                                $("<div/>")
                                    .addClass("join")
                            )
                            .append(
                                $("<div/>")
                                    .addClass("location")
                            )
                            .append(
                                $("<div/>")
                                    .addClass("notes")
                            )
                            .append(
                                $("<div/>")
                                    .addClass("clearboth")
                            )
                    )
            )
           .appendTo("ul");
    },
    appendWithCreateNode: function() {
        if(BenchmarkUI.test==false) BenchmarkUI.test=true;
        else BenchmarkUI.test=false;
            $._li({"contactid":""})
                ._span({"class":"baseinfo"})
                    ._span().addClass("fullname").text("FULLNAME test").span_()
                    ._if_(BenchmarkUI.test,
                        $._append_("(")
                        ._a({"href":"#"}).text("coucou").click(function(){alert("test");}).a_()
                        ._append_(")")
                    ,
                        $._append_(" ")
                    )
                    ._a_({"persist":"true", href:"#", "class":"develop"})
                    ._span({"class":"company"}).text("company").span_()
                .span_()
                ._div({"class":"moreinfo"})
                    .hide()
                    ._div_({"class":"join"})
                    ._div_({"class":"location"})
                    ._div_({"class":"notes"})
                    ._div_({"class":"clearboth"})
                .div_()
            .li_()
            ._appendTo_("ul");
    },
    bench: function(benched,times) {
        var i;
        var startDate = new Date();
        for(i=0; i<times; i++) {
            benched();
        }
        var endDate = new Date();
        return endDate.getTime() - startDate.getTime();
    },
    init: function() {
        var valcn = BenchmarkUI.bench(BenchmarkUI.appendWithCreateNode, 100);
        var valjq = BenchmarkUI.bench(BenchmarkUI.appendWithJquery, 100)
        var ratio = (valcn*100/valjq) - 100;
        $("#appendWithCreateNode").text("appendWithCreateNode : "+valcn+" ms");
        $("#appendWithJquery").text("appendWithJquery : "+valjq+" ms");
        $("#perf").text("ratio : " + ratio.toFixed(2)+"%");
    }
};

$(document).ready(BenchmarkUI.init);
        </script>
    </head>
    <body>
    <div id="appendWithCreateNode"></div>
    <div id="appendWithJquery"></div>
    <div id="perf"></div>
    <ul></ul>
    </body>
</html>
